<template>
  <el-dialog
      v-model="visibility"
      title="袋皮扣减"
      width="60%"
      append-to-body
      draggable
      :close-on-click-modal="false">
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        :label-width="config.form.label.width"
        status-icon>
      <el-row>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="米厂简称"
              prop="baseRiceBarnId">
            <el-select
                v-model="formData.baseRiceBarnId"
                v-loading="riceFactoryLoading"
                placeholder="米厂"
                filterable
                clearable>
              <el-option
                  v-for="item in riceFactorySimpleNameList"
                  :key="item.id"
                  :label="item.simple_name"
                  :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="商品简称"
              prop="baseRiceBarnGoodsId">
            <el-select
                v-model="formData.baseRiceBarnGoodsId"
                placeholder="商品简称"
                filterable
                clearable>
              <el-option
                  v-for="item in goodsSimpleNameList"
                  :key="item.goodsId"
                  :label="item.goodsSimpleName"
                  :value="item.goodsId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="袋皮简称"
              prop="bagInfoSimpleName">
            <el-input
                disabled
                v-model="formData.bagInfoSimpleName"
                placeholder="袋皮简称"></el-input>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="扣减数量（袋）"
              prop="count">
            <el-input-number
                :min="0"
                style="width: 100%;"
                :precision="0"
                v-model="formData.count"
                placeholder="入库数量"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="启用状态"
              prop="isEnable">
            <el-select
                v-model="formData.isEnable"
                placeholder="选择"
                clearable>
              <el-option
                  :label="config.button.text.enable"
                  :value="true" />
              <el-option
                  :label="config.button.text.stop"
                  :value="false" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="备注"
              prop="remark">
            <el-input
                v-model="formData.remark"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
        <el-button
            type="primary"
            @click="saveEvent">
          {{ config.button.text.save }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import ApiBagInventory from "@/api/modules/bag_inventory"
import { useValidator } from "@/hooks/useValidator";

const visibility = ref(false)
const formData = ref({})
const formRef = ref()
const { required, validate, clearValidate } = useValidator()
const riceFactorySimpleNameList = ref([])
const riceFactoryLoading = ref(false)
const bagInfoSimpleNameList = ref([])
const goodsSimpleNameList = ref([])
const bagInfoFactoryLoading = ref(false)
const formRules = {
  baseRiceBarnId: [required("米厂简称")],
  baseRiceBarnGoodsId: [required("商品简称")],
  bagInfoSimpleName: [required("袋皮简称")],
  count: [required("入库数量")],
  isEnable: [required("启用状态", "change")],
}

const props = defineProps(["rowData"])

const emits = defineEmits(["save"])

watch(() => visibility.value, (newVal) => {
  if (newVal) {
    formData.value = {
      ...props.rowData,
      isEnable: true,
    }
    getRiceFactorySimpleNameList()
    getSimpleList();
    setTimeout(() => {
      clearValidate(formRef.value)
    })
  }
}, { immediate: true })

//获取米厂简称列表
const getRiceFactorySimpleNameList = async () => {
  riceFactoryLoading.value = true
  const data = await ApiBagInventory.getSimpleNameList('/baseRiceBarn/')
  riceFactorySimpleNameList.value = data.data
  riceFactoryLoading.value = false
}


//根据米厂获取商品列表
const getGoodsSimpleNameList = async (id) => {
  const data = await ApiBagInventory.getAllGoodsAndBagInfoList('/baseRiceBarnGoods/',id)
  goodsSimpleNameList.value = data.data
}

const getSimpleList = () => {
  if(formData.value.baseRiceBarnId){
    // formData.value.baseRiceBarnGoodsId = formData?.value?.baseRiceBarnGoodsId?formData.value.baseRiceBarnGoodsId.toString():'';
    // formData.value.bagInfoId = formData?.value?.bagInfoId?formData.value.bagInfoId.toString():'';
    getGoodsSimpleNameList(formData.value.baseRiceBarnId)
  }else{
    goodsSimpleNameList.value = [];
  }
}

watch(() => formData.value.baseRiceBarnId, (newVal,oldVal) => {
  if(newVal&&oldVal&&newVal!==oldVal){
    formData.value.baseRiceBarnGoodsId = '';
    formData.value.bagInfoId = '';
  }
  getSimpleList();
}, { immediate: true })

//监听商品名称变化带出带皮信息
watch(() => formData.value.baseRiceBarnGoodsId, (newVal,oldVal) => {
  if(newVal){
    const findItem = goodsSimpleNameList.value.find(item=>item.goodsId==formData.value.baseRiceBarnGoodsId);
    if(findItem){
      formData.value.bagInfoSimpleName = findItem.bagInfoSimpleName;
      formData.value.bagInfoId = findItem.bagInfoId;
    }else{
      formData.value.bagInfoSimpleName = '';
      formData.value.bagInfoId = '';
    }
  }
  getSimpleList();
}, { immediate: true })

const saveEvent = async () => {
  await validate(formRef.value)
  await ApiBagInventory.outStorage(formData.value)
  emits("save")
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
.el-row {
  align-items: flex-start;
}
</style>
